{% extends "sentry/bases/organization.html" %}

{% load crispy_forms_tags %}
{% load i18n %}
{% load sentry_avatars %}
{% load sentry_helpers %}
{% load sentry_features %}

{% block title %}{% trans "Members" %} | {{ block.super }}{% endblock %}

{% block org_members_nav %}active{% endblock %}

{% block main %}
  {% if can_add_members %}
    <a class="btn btn-primary btn-sm pull-right" href="{% url 'sentry-create-organization-member' organization.slug %}">
      <span class="icon-plus"></span> {% trans "Invite Member" %}
    </a>
  {% else %}
    <a class="btn btn-primary btn-sm btn-disabled tip pull-right"
       title="{% trans "You do not have enough permission to add new members" %}">
      <span class="icon-plus"></span> {% trans "Invite Member" %}
    </a>
  {% endif %}

  <h3>{% trans "Members" %}</h3>

  {% if request_list %}
  <div class="panel panel-default horizontal-scroll">
    <table class="table" id="access_request_list">
      <thead>
        <tr>
          <th colspan="2">{% trans "Pending Access Requests" %}</th>
        </tr>
      </thead>
      <tbody>
      {% for access_request in request_list %}
        <tr>
          <td>
            <strong>{{ access_request.member.user.get_display_name }}</strong> requests access to the <strong>{{ access_request.team.name }}</strong> team.
          </td>
          <td class="align-right">
            <a href="#" class="btn btn-primary btn-sm"
                   data-action="approve" data-id="{{ access_request.id }}">Approve</a>
            <a href="#" class="btn btn-default btn-sm"
                   data-action="deny" data-id="{{ access_request.id }}">Deny</a>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  {% elif ref == 'access-requests' %}
    <div class="well">
      <p>{% trans "All pending access requests have been taken care of." %}</p>
    </div>
  {% endif %}

  <div class="panel panel-default horizontal-scroll">
    <table class="table member-list">
      <colgroup>
        {% if can_remove_members or members_can_leave %}
        <!-- 4 column -->
        <col width="45%"/>
        <col width="15%"/>
        <col width="15%"/>
        <col width="25%"/>
        {% else %}
        <!-- 3 column -->
        <col width="60%"/>
        <col width="20%"/>
        <col width="20%"/>
        {% endif %}
      </colgroup>
      <thead>
        <tr>
          <th>{% trans "Member" %}</th>
          <th>&nbsp;</th>
          <th class="squash">{% trans "Role" %}</th>
          {% if can_remove_members or member_can_leave %}
            <th class="squash">&nbsp;</th>
          {% endif %}
        </tr>
      </thead>
      <tbody>
        {% for member, needs_sso, has_2fa in member_list %}
          <tr {% if member.role == request.GET.role %}class="member-role-highlight"{% endif %}>
            <td class="table-user-info">
              {% avatar member %}
              <h5><a href="{% url 'sentry-organization-member-settings' organization.slug member.id %}">
                {{ member.get_display_name }}
              </a></h5>
              {{ member.get_email }}
              <br />
            </td>
            <td class="status">
              {% if needs_sso or member.is_pending %}
                {% if member.is_pending %}
                  <strong>Invited</strong>
                {% else %}
                  <strong>Missing SSO Link</strong>
                {% endif %}
                <br>
                {% if can_add_members %}
                <a href="javascript:void(0)" class="resend-invite btn btn-sm btn-primary" data-member-id="{{ member.id }}" style="padding: 0 4px; margin-top: 2px">Resend invite</a>
                {% endif %}
              {% elif not has_2fa %}
                <span style="color:#B64236;" class="icon-exclamation tip" title="{% trans "Two-factor auth not enabled" %}"></span>
              {% endif %}
            </td>
            <td class="squash">{{ member.get_role_display }}</td>
            {% if can_remove_members or member_can_leave %}
            <td class="align-right squash">
              <a href="{% url 'sentry-organization-member-settings' organization.slug member.id %}"
                 class="btn btn-default btn-sm">
                {% trans "Details" %}
              </a>
              {% if member.user != request.user %}
                {% if can_remove_members %}
                  <a href="javascript:void(0)" class="btn btn-danger btn-sm remove-member"
                      data-member-id="{{ member.id }}">
                    <span class="icon icon-trash"></span> &nbsp;{% trans "Remove" %}
                  </a>
                {% else %}
                  <a href="javascript:void(0)" class="btn btn-sm btn-disabled tip"
                     title="You do not have access to remove this member.">
                    <span class="icon icon-trash"></span> &nbsp;{% trans "Remove" %}
                  </a>
                {% endif %}
              {% elif member.user == request.user %}
                {% if member_can_leave %}
                  <a href="javascript:void(0)" class="btn btn-danger btn-sm remove-member"
                      data-member-id="{{ member.id }}"
                      data-message="Are you sure you wish to leave this organization?">
                    <span class="icon icon-exit"></span> &nbsp;Leave
                  </a>
                {% else %}
                  <a href="javascript:void(0)" class="btn btn-sm btn-disabled tip"
                     title="You cannot leave this organization as you are the only owner.">
                    <span class="icon icon-exit"></span> &nbsp;Leave
                  </a>
                {% endif %}
              {% endif %}
            </td>
            {% endif %}
          </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
{% endblock %}

{% block content_after %}
  <style>
  .member-list form {
    display: inline-block;
  }
  </style>
  <script>
  $('.remove-member').click(function(){
    var $this = $(this);
    var msg = $this.data('message') || 'Are you sure you wish to remove this member?';

    if (!confirm(msg)) {
      return;
    }

    $.ajax({
      url: '{{ URL_PREFIX }}/api/0/organizations/{{ organization.slug }}/members/' + $this.data('member-id') + '/',
      method: 'DELETE',
      success: function() {
        $this.parents('tr').remove();
      },
      error: function(xhr) {
        if (xhr.responseJSON) {
          alert('Unable to remove member: ' + xhr.responseJSON.detail);
        } else {
          alert('There was an error while trying to remove the member.');
        }
      }
    });
  });

  $('.resend-invite').click(function(){
    var $link = $(this);
    var $loader = $('<span class="icon-spinner spin"></span>');

    $link.replaceWith($loader);

    $.ajax({
      url: '{{ URL_PREFIX }}/api/0/organizations/{{ organization.slug }}/members/' + $link.data('member-id') + '/',
      data: JSON.stringify({
        reinvite: 1,
      }),
      contentType: 'application/json',
      method: 'PUT',
      success: function() {
        $loader.replaceWith('<span>Sent!</span>');
      },
      error: function() {
        $loader.replaceWith($link);
        alert('There was an error while trying to reinvite the member.');
      }
    });
  });

  $('#access_request_list a').click(function(e){
    var $el = $(this),
        $row = $el.parents('tr');
    if (!$el.data('action')) {
      return;
    }
    e.preventDefault();

    $row.addClass('loading');
    $('a', $row).attr('disabled', true);

    $.ajax({
      method: 'PUT',
      url: '{{ URL_PREFIX }}/api/0/organizations/{{ organization.slug }}/access-requests/' + $el.data('id') + '/',
      contentType: 'application/json',
      data: JSON.stringify({
        isApproved: $el.data('action') === 'approve'
      }),
      success: function() {
        $row.remove();
        if (!$('#access_request_list tbody tr').length) {
          $('#access_request_list').remove();
        }
      },
      error: function() {
        window.alert('We were unable to act on the access request. Maybe someone else beat you to it?');
        $('a', $row).attr('disabled', false);
      }
    });
  });
  $('.tip').tooltip();
  </script>
{% endblock %}
